<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="format-detection" content="telephone=no">
		<title>html title</title>

		<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/animate/animate.css">
		<style>
			.titlebar,.tab.active{
				background-color:#18B2ED;
			}
			.titlebar h1,.tab.active label{
				font-weight:bold;
				color:white;
			}
			.titlebar a i{
				color:white;
			}
		</style>
	</head>
	<body>
		<div id="section_container">
		 <section id="sectionid" data-role="section" class="active">
		 	<header>
		 		<div class="titlebar" >
		 			<a class="left">
		 				<i class="icon icon-arrowleft-fill"></i>
		 			</a>
		 			<h1 class="text-center ">title</h2>
		 			<a class="right">
		 				<i class="icon icon-menu-fill"></i>
		 			</a>
		 		</div>
		 	</header>
		 	<article id="article_main" data-role="article"  class="active" style="top:45px;bottom:40px">
		 		<div id="pageslide" class="full" data-role="slider">
		 		<div class="scroller">
		 		  <div id="page1" class="slide" data-role="page" data-scroll="verticle" style="height:100%">
		 			<div class="scroller">
		 				page1
		 				<ul class="list" id="mylist">
                           <li is="caipu-item" class="table-view-cell "
                                  v-for="i in list"
                                  v-bind:item="i"
                                  v-on:showinfo="showinfo2(i)"/>
		 				</ul>
		 			</div>
		 		  </div>
		 		  <div id="page2" class="slide" data-role="page" >
		 		  	page2
		 		  </div>
		 		</div>
		 		</div>
		 	</article>
		 	<footer>
				<ul class="menubar" style="line-height: 40px;">
					<li class="tab active" data-role="tab"  href="#page1" data-toggle="page">
						<label class="text-center">main</label>
					</li>
					<li class="tab " data-role="tab"  href="#page2" data-toggle="page">
						<label class="text-center">page2</label>
					</li>
				</ul>
		 	</footer>
		 </section>
		</div>
		<script src="../assets/third/amd/require.js" ></script>
		<script src="../assets/app/js/app.require.js"></script>
		<script>
		 require(['vue','agile'],function(Vue){
		 	var rdata={list:[
		 		{dish:"title1",fenshu:100000,pr:5,selcount:0},
		 		{dish:"title2",fenshu:100000,pr:6.5,selcount:0},
		 		{dish:"title3",fenshu:100000,pr:6.5,selcount:0},
		 		{dish:"title4",fenshu:100000,pr:6.5,selcount:0},
		 		{dish:"title4",fenshu:100000,pr:6.5,selcount:0},
		 		{dish:"title4",fenshu:100000,pr:6.5,selcount:0},
		 		{dish:"title4",fenshu:100000,pr:6.5,selcount:0}
		 	]};
		 	
            // 注册组件标签 <caipu-item> 绑定组件 
			Vue.component('caipu-item', Vue.extend({
                template:  '<li >\
                            <div class="justify">\
							<img data-source="../img/s1-2.jpg" style="width:90px;height:90px"/>\
							</div>\
							<div class="justify-content" >\
							<div class="justify-content" style="height:35px;">\
							<h1>{{item.dish}} </h1>\
							<small >\
							<label class="bold " >供应：{{item.fenshu}} 份</label>\
							</small>\
							</div>\
							<div class="left">\
							<label class="bold color-2" style="font-size:18px;">￥{{item.pr}}元</label>\
							</div>\
							<div class="right" style="position:absolute;right:15px">\
							<i class="icon icon-rdocancel size24 color-1" @tap="sub(item)"></i>\
							<label class="bold" style="font-size:18px;">{{item.selcount}}</label>\
							<i class="icon icon-rdoadd-fill size24 color-1" @tap="add(item)"></i>\
							</div>\
							</div>\
							</li>',
                 props: {
                 	item:Object
                 },
                 methods:{
                 	add:function(data){	
                 	  alert(2);
			          this.item.selcount+=1;
			          return false;
                 	},
                 	sub:function(data){
                 	  if (this.item.selcount>0)
			           this.item.selcount-=1;
			          return false;
                 	}
                 }
            })
            );

           //菜单列表控件
			var vm = new Vue({
                   el: '#mylist',
                    data: {list:'',
                    	   ret:"erro"},
                    created:function(){
                      	  var _self = this;
                          _self.list=rdata.list;
                          return false;	
                      }
				 });
				 
				
			$('#article_main').on("articleload", function() {
				A.Slider('#pageslide', {
					dots : 'hide'
				});
			});
				
		 });
		</script>
	</body>
</html>